<template>
	<view v-show="loadingShow">
		<view class="request-loading-view" :class="{'loading-mantle': mantle}" :style="{'--back-loading': backLoading}">
			<div class="loading-logo">
				<text></text>
				<text></text>
				<text></text>
				<text></text>
				<text></text>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		props: {
			// 是否这是加载中
			loadingShow: {
				type: Boolean,
				default: false
			},
			// 是否需要蒙层
			mantle: {
				type: Boolean,
				default: true
			},
			// 加载动画背景色
			backLoading: {
				type: String,
				default: '#fff'
			}
		}
	};
</script>

<style lang="scss" scoped>
	.loading-mantle {
		background-color: rgba(0, 0, 0, 0.8);
	}

	.request-loading-view {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99999;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;

		.loading-logo {
			position: relative;
			margin-right: 90rpx;
		}

		.loading-logo text {
			display: block;
			bottom: 0px;
			width: 9px;
			height: 5px;
			background: var(--back-loading);
			position: absolute;
			animation: preloader 1.5s infinite ease-in-out;
		}

		.loading-logo text:nth-child(2) {
			left: 11px;
			animation-delay: .2s;
		}

		.loading-logo text:nth-child(3) {
			left: 22px;
			animation-delay: .4s;
		}

		.loading-logo text:nth-child(4) {
			left: 33px;
			animation-delay: .6s;
		}

		.loading-logo text:nth-child(5) {
			left: 44px;
			animation-delay: .8s;
		}

		@keyframes preloader {
			0% {
				height: 5px;
				transform: translateY(0px);
				background: var(--back-loading);
			}

			25% {
				height: 30px;
				transform: translateY(15px);
				background: var(--back-loading);
			}

			50% {
				height: 5px;
				transform: translateY(0px);
				background: var(--back-loading);
			}

			100% {
				height: 5px;
				transform: translateY(0px);
				background: var(--back-loading);
			}
		}
	}
</style>
